<template>
  <div class="chatroom">
    <!--左侧-->
    <div class="left">
      <LeftMenu></LeftMenu>
    </div>
    <!--右侧-->
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { getUserInfo } from "@/api/user/index";
import { getToken } from "@/libs/util";
import LeftMenu from "@/components/menu/index";

export default {
  name: "home",
  components: { LeftMenu },
  data() {
    return {
      userInfo: {},
      avatarUrl: "static/images/avatar-1.jpg",
      msg: "",
      id: "",
      count: 0,
      selfMessage: [],
      actions: []
    };
  },
  methods: {
    getData(data) {
      getUserInfo(data).then(res => {
        this.userInfo = res.data.data;
      });
    },
    sendMessage() {
      if (this.msg.length <= 0) {
        return;
      }
      this.$socket.emit("message", {
        nick: this.userInfo.nick,
        msg: this.msg,
        username: this.userInfo.username
      });
      this.msg = "";
    },
    handleKeydown(e) {
      if (e.keyCode === 13) {
        this.sendMessage();
      }
    }
  },
  created() {
    var token = getToken();
    if (token) {
      this.userInfo.nick = token;
      this.getData(token);
    } else {
      this.$router.push("/login");
    }
  },
  mounted() {
    this.$socket.emit("connect");
    this.$socket.emit("join", { name: this.userInfo.nick });
  },
  sockets: {
    //不能改,建立连接自动调用connect
    connect() {
      console.log("connect");
    },
    joinNoticeSelf(data) {
      console.log(data);
      this.count = data.count;
    },
    message(data) {
      this.selfMessage.push(data);
    },
    // joinNoticeOther(data) {
    //   this.actions.push(data);
    // },
    disconnect(data) {
      this.actions.push(data);
    }
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.el-button + .el-button {
  margin-left: 0;
  margin-top: 10px;
}
.right {
  /*border-left: 1px solid #888888;*/
  width: 70%;
  height: 100%;
  /*background-image: url(http://p4.so.qhmsg.com/bdr/_240_/t010d7efb6430fb56d9.jpg);*/
  background-color: #eeeeee;
}

html {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /*background-color: #dddddd;*/
}

.chatroom {
  width: 1200px;
  height: 800px;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  opacity: 0.7;
  box-shadow: 0 0 3px 3px #bbbbbb;
}

.left {
  width: 30%;
  height: 100%;
}

.icon-container {
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.note-container {
  /*margin: 10px;*/
  padding: 5px;
  height: 30%;
  /*border-radius: 10px;*/
  /*background-color: white;*/
}
</style>